<!--
 * @Author: adolphus adolphus520@163.com
 * @Date: 2022-12-10 00:44:22
 * @LastEditors: 姚杰鸿
 * @LastEditTime: 2024-11-11 16:57:41
 * @Description: file content
-->
<template>
  <div ref="asideRef">
    <div
      :class="{ extend: extend_bk, collapse: !extend_bk, hidden: !show }"
    ></div>
    <div
      class="aside"
      :class="{ extend: extend, collapse: !extend, hidden: display }"
    >
      <div class="title">
        <transition name="title-fade">
          <el-image
            class="title-logo"
            v-show="extend || show"
            src="/assets/logo.png"
          >
            <template #error>
              <div class="image-slot">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
        </transition>
        <transition name="title-fade">
          <p v-if="extend" class="title-text">
            <span>MDs&nbsp;</span>
            <span>lib</span>
          </p>
        </transition>
      </div>

      <MdsMenu
        :menu-items="menuItems"
        :show-title="extend"
        :actpath="actpath"
        @mouseenter="mouseEnter"
        @mouseleave="mouseLeave"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import { useStore } from "@/store";
import * as vars from "@/lib/vars";

import useClickOutside from "@/lib/hooks/UseClickOutside";

const mdsAsideProps = defineProps({
    isCollapse: {
      type: Boolean,
      default: false,
    },
    show: {
      type: Boolean,
      default: true,
    },
    actpath: {
      type: String,
      default: "",
    },
  }),
  emit = defineEmits(["collapse"]),
  extend = ref(true),
  display = ref(false),
  extend_bk = ref(true),
  mouseEnter = () => {
    if (mdsAsideProps.isCollapse) {
      extend.value = true;
    }
  },
  mouseLeave = () => {
    if (mdsAsideProps.isCollapse) {
      extend.value = false;
    }
  },
  asideRef = ref<null | HTMLElement>(null),
  isClickOutside = useClickOutside(asideRef),
  $store = useStore(),
  menuItems = ref($store.getters.getMenus),
  _searchMenu = (items: any, search: string | null) => {
    if (!search) return $store.getters.getMenus;
    let _items = Array<vars.menuItem[]>();
    for (let i in items) {
      let item = items[i];
      if (-1 < item.name.indexOf(search)) {
        _items.push(item);
      } else if (item.items) {
        let res = _searchMenu(item.items, search);
        if (0 < res.length) {
          item.items = res;
          _items.push(item);
        }
      }
    }
    return _items;
  };

onMounted(() => {
  console.log("MdsAside onMounted");
});

watch(
  () => mdsAsideProps.isCollapse,
  () => {
    if (mdsAsideProps.show) {
      extend.value = !mdsAsideProps.isCollapse;
      extend_bk.value = !mdsAsideProps.isCollapse;
    } else {
      if (!mdsAsideProps.isCollapse) {
        display.value = false;
        extend.value = true;
      } else {
        display.value = true;
        extend.value = false;
      }
    }
    if (extend.value) {
      isClickOutside.value = false;
    }
  }
);
watch(
  () => mdsAsideProps.show,
  () => {
    display.value = !mdsAsideProps.show;
  }
);
watch(
  () => isClickOutside.value,
  () => {
    if (!mdsAsideProps.show && isClickOutside.value) {
      emit("collapse", 1);
    }
  }
);
</script>

<style lang="scss" scoped>
.title {
  height: 60px;
  display: inline-flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  border-bottom: solid 1px var(--el-menu-border-color);
}
.title .title-logo {
  position: fixed;
  width: 60px;
  height: 60px;
}
.title .title-text {
  position: fixed;
  left: 80px;
}

.aside {
  width: 250px;
}

.extend {
  transition: all 0.5s ease;
}
.collapse {
  transition: all 0.5s ease;
  width: 50px;
}
.hidden {
  transition: all 0.5s ease;
  width: 0px;
}

.title-fade-enter-active,
.title-fade-leave-active {
  transition: all 0.5s ease;
  overflow: hidden;
}

.title-fade-enter-from,
.title-fade-leave-to {
  opacity: 0;
}
.title-fade-enter-to,
.title-fade-leave-from {
  opacity: 1;
}
</style>
